<template>
  <div class="bg-white overflow-hidden">
    <div class="form-title">关联企业信息</div>
    <el-form
      v-loading="formLoading"
      ref="relateForm"
      :model="tempFormObj"
      label-width="0"
    >
      <table class="self-table-form">
        <thead>
          <th
            v-for="(item, index) in headNameList"
            :key="item + index"
            class="m-label text-center"
          >
            <div>{{ item }}</div>
          </th>
          <th class="m-label text-center w-20">操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tempFormObj.formList" :key="item.id">
            <td class="m-label text-center w-16">
              {{ index + 1 }}
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.name'"
                :rules="formRules.name"
              >
                <el-input type="text" v-model="item.name"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.address'"
                :rules="formRules.address"
              >
                <el-input type="text" v-model="item.address"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.relationship'"
                :rules="formRules.relationship"
              >
                <el-input type="text" v-model="item.relationship"></el-input>
              </el-form-item>
              <!-- <el-input type="text" v-model="item.relationship"></el-input> -->
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.time'"
                :rules="formRules.time"
              >
                <el-date-picker
                  v-model="item.time"
                  align="right"
                  type="date"
                  prefix-icon="el-icon"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  style="width: 100%;"
                >
                </el-date-picker>
              </el-form-item>

              <!-- <el-input type="text" v-model="item.time"></el-input> -->
            </td>
            <td>
              <el-form-item
                :prop="'formList.' + index + '.remark'"
                :rules="formRules.remark"
              >
                <el-input type="text" v-model="item.remark"></el-input>
              </el-form-item>
            </td>
            <td>
              <div class="flex justify-center">
                <el-button
                  class="m-auto"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteFormItem(item.id)"
                >
                </el-button>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="headNameList.length + 1">
              <div class="flex justify-start">
                <el-button class="ml-0" type="primary" @click="addFormItem">
                  添加记录
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>
    <div class="flex justify-between py-10 text-center">
      <el-button
        v-if="isSubmit"
        class="confirm-btn tracking-widest"
        type="primary"
        size="medium"
        @click="submitForm"
      >
        保存 / 下一步
      </el-button>
      <DeclareNextItem ref="next" v-show="false" />
    </div>
  </div>
</template>

<script>
import { limitLength } from "@/utils/formRules.js";
import { addRelated } from "@/api/declareForm/related";

export default {
  name: "RelateEnterpriseForm",
  props: {
    sourceList: {
      type: Array,
      default: [],
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      formLoading: false,
      headNameList: [
        "序号",
        "关联企业名称",
        "关联企业地址",
        "关联关系",
        "关联时间",
        "关联业务情况",
      ],
      modleFormObj: {
        id: -1,
        name: "",
        address: "",
        relationship: "",
        time: "",
        valuation: "",
        remark: "",
        relationId: "",
      },
      tempFormObj: {
        formList: [],
      },
      formRules: {
        name: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入关联企业地址", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
        relationship: [
          { required: true, message: "请输入关联企业关系", trigger: "blur" },
          {
            validator: limitLength(30),
            trigger: "blur",
          },
        ],
        time: [{ required: true, message: "请选择关联时间", trigger: "blur" }],
        remark: [
          { required: true, message: "请选择关联业务情况", trigger: "blur" },
          {
            validator: limitLength(100),
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    sourceList(v) {
      if (v) {
        // v.forEach(item=>{
        //   let tempObj = {}
        // })
        this.tempFormObj.formList = v;
      }
    },
  },
  created() {
    this.initRelationId();
  },
  methods: {
    initRelationId() {
      let realationId = this.$route.query.id;
      if (realationId) {
        this.modleFormObj.relationId = realationId;
      }
    },

    addFormItem() {
      let timeChuo = new Date();
      let addObj = JSON.parse(JSON.stringify(this.modleFormObj));
      addObj["id"] = timeChuo.valueOf();

      this.tempFormObj.formList.push(addObj);
    },
    deleteFormItem(id) {
      let tempArr = JSON.parse(JSON.stringify(this.tempFormObj.formList));
      let newArr = tempArr.filter((item) => {
        return item.id !== id;
      });
      this.tempFormObj.formList = newArr;
    },
    submitForm() {
      let formName = "relateForm";
      let resFrom = this.tempFormObj.formList;
      this.$refs[formName].validate((valid) => {
        let resquestObj = { relationId: this.$route.query.id, list: [] };
        if (valid) {
          this.formLoading = true;
          resquestObj["list"] = resFrom;

          addRelated(resquestObj).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              // 跳转至下一页
              this.$refs.next.nextDeclareItem();
            } else {
              this.$message.error(res.msg);
            }
            this.formLoading = false;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-title {
  @apply text-center text-xl border-b p-3 mt-4;
}

.self-table-form {
  min-height: auto;
  @apply w-full my-5 m-auto;

  ::v-deep .el-input__inner,
  ::v-deep .el-textarea__inner {
    @apply rounded-none border-0 px-2;

    // &:focus {
    //   @apply border border-black text-black;
    // }
  }

  ::v-deep .el-input-group__append {
    border-width: 0;
    background-color: #fff;
  }

  .label {
    @apply font-bold text-center;
  }

  td,
  th {
    @apply border;
    border-color: #bfbfbf;
    padding: 1rem;
  }
}
</style>
